<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="hg-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="/hg-layui-admin-ui/css/font.css">
    <link rel="stylesheet" href="/hg-layui-admin-ui/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/hg-layui-admin-ui/lib/admin/admin.css" media="all">
    <link rel="stylesheet" href="/hg-layui-admin-ui/lib/Scrollbar/jquery.scrollbar.css">
    <script type="text/javascript" src="/hg-layui-admin-ui/lib/admin/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/hg-layui-admin-ui/lib/Scrollbar/jquery.scrollBar.js"></script>
    <script type="text/javascript" src="/hg-layui-admin-ui/lib/layui/layui.js"></script>
    <script type="text/javascript" src="/hg-layui-admin-ui/lib/admin/admin.js"></script>
    <script type="text/javascript" src="/hg-layui-admin-ui/xm-select/dist/xm-select.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body class="layui-body-content">
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        学生姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" name="name" required="" lay-verify="name" autocomplete="off"
                               class="layui-input"></div>
                </div>
                <div class="layui-form-item">
                    <label for="select" class="layui-form-label">
                        性别</label>
                    <div class="layui-input-inline">
                        <div id="select" ></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="number" class="layui-form-label">
                        学号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="number" name="number" required="" lay-verify="number" autocomplete="off"
                               class="layui-input"></div>
                    <div class="layui-form-mid layui-word-aux">
                        将会成为唯一学生编号，不可更改</div>
                </div>
                <div class="layui-form-item">
                    <label for="profession" class="layui-form-label">
                        专业</label>
                    <div class="layui-input-inline">
                        <input type="text" id="profession" name="profession" required="" lay-verify="profession" autocomplete="off"
                               class="layui-input"></div>
                </div>
                <input type="hidden" id="sex" name="sex" />
                <div class="layui-form-item">
                    <label for="profession" class="layui-form-label"></label>
                    <button id="submit" class="layui-btn" lay-filter="add" lay-submit="">增加</button></div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer', 'jquery'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                //自定义验证规则
                form.verify({
                });

                //监听提交
                form.on('submit(add)',
                    function (data) {
                        var selected = xmSelect.get('#select', true);
                        //发异步，把数据提交给php
                        var student = data.field;
                        student.sex = selected.getValue('valueStr');
                        $.ajax({
                            type:"POST",
                            url:"add",
                            data:student,
                            success:function (data) {
                                layer.alert("增加成功", {
                                        icon: 6
                                    },
                                    function () {
                                        //关闭当前frame
                                        hg.close();

                                        // 可以对父窗口进行刷新
                                        hg.base_reload();
                                    });
                            },
                            error: function (data,type, err) {
                                console.log("ajax错误类型："+type);
                                console.log(err);

                                layer.alert("增加失败", {
                                    icon: 6
                                },
                                function () {
                                    //关闭当前frame
                                    hg.close();

                                    // 可以对父窗口进行刷新
                                    hg.base_reload();
                                });
                            }
                        });
                        return false;
                    });

                //选框加载
                var select = xmSelect.render({
                    // 这里绑定css选择器
                    el: '#select',
                    radio: true,            //单选
                    // 渲染的数据
                    data: [
                        {name: '男', value: '男', selected: true},
                        {name: '女', value: '女'},
                    ],
                });

            });
    </script>
</body>

</html>